<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>jDTScroll</title>
	<script src="http://www.google.com/jsapi"></script>
	<script>google.load("jquery", '1.4');</script>
	<script src="jdtscroll.js"></script>
	<script>
		jQuery(function($) {
			$('a[href^="#"]').jdtScroll();
		});
	</script>
<style type="text/css">
body {
	margin: 0;
	padding: 0 50px 1000px;
	font-family	:
		'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',
		'メイリオ', verdana, 'ＭＳ Ｐゴシック', sans-serif;
	overflow-x: hidden;
}
div {
	margin: 0 0 20px;
	padding: 30px;
}
div.odd {
	background: #EEE;
}
div.even {
	background: #CCC;
}
h2 {
	margin: 0 0 10px;
}
li {
	margin: 0 0 5px;
}
</style>

</head>
<body id="pageTop">

<h1>jDTScroll</h1>

<p>スムーズにスクロールしないスムーススクロールを実装するjQueryプラグインです。</p>

<script>
var nav = '';
for (var i = 1; 11 >= i; ++i) {
	nav += '<li><a href="#sec'+ i +'">セクション-'+ i +'</a></li>';
}

var div = '';
for (var i = 1; 10 >= i; ++i) {
	div += '<div id="sec'+ i +'" class="'+ (i % 2 === 0 ? 'even' : 'odd') +'">'
	     + '<h2>セクション-'+ i +'</h2><ul>'+ nav +'</ul></div>';
}

document.write(div);
</script>

</body>
</html>
